<template>
  <div class="work-main">
    <div class="container head">
      <div class="head-block">
        <img src="/static/workbox/gjx_bsj.png" alt="" class="top_imga">
        <img src="/static/workbox/gjx_bwz.png" alt="" class="top_imgb">
        <img src="/static/workbox/ewm.png" alt="" class="top_imgc">
      </div>
    </div>
    <!-- <div class="container">
      <div class="common-container left-container">
        <div v-for="(item,index) in ysList" :key="index">
          <div v-if="index%2==0">
            <div class="common-item left-item">
              <img :src="item.icon" />
            </div>
            <div class="common-item center-item">
              <div class="center-top-item">{{item.title}}</div>
              <div class="center-bottom-item">{{item.des}}</div>
            </div>
            <div class="common-item right-item">
              <div class="item-opration" @click="goUrl('', `${item.type}`)">{{item.btnTitle}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="common-container right-container">
        <div v-for="(item,index) in ysList" :key="index">
          <div v-if="index%2==1">
            <div class="common-item left-item">
              <img :src="item.icon" />
            </div>
            <div class="common-item center-item">
              <div class="center-top-item">{{item.title}}</div>
              <div class="center-bottom-item">{{item.des}}</div>
            </div>
            <div class="common-item right-item">
              <div class="item-opration" @click="goUrl('', `${item.type}`)">{{item.btnTitle}}</div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="container main">
      <div class="common-container" v-for="(item,index) in ysList" :key="index">
        <img :src="item.icon" alt="">
        <div class="common-left">
          <p class="left-one">{{item.title}}</p>
          <p class="let-two">{{item.des}}</p>
        </div>
        <button class="common-right" @click="goUrl('',item.type)">{{item.btnTitle}}</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        ysList: [{
            icon: "/static/workbox/gjx_tqid.png",
            title: "提取UDID",
            btnTitle: "提取",
            des: "用iOS设备扫描二维码或者打开链接即可获取设备上的UDID",
            type: "UDID",
          },
          {
            icon: "/static/workbox/gjx_zxzz.png",
            title: "Plist文件在线制作",
            btnTitle: "制作",
            des: "将IPA的下载链接，图标的链接，以及APP的名字和BundleID放到Plist文件中，通过苹果的itms-services可以实现APP在线下载的功能。",
            type: "Plist",
          },
          {
            icon: "/static/workbox/gjx_app.png",
            title: "APP图标在线制作",
            btnTitle: "制作",
            des: "可以提供在线图标制作，多种图案和 风格可选，自由拼接，支持多种尺寸 和格式",
            type: "APP",
          },
          {
            icon: "/static/workbox/gjx_ioszs.png",
            title: "IOS 证书状态检测",
            btnTitle: "检测",
            des: "实时检测证书有效性",
            type: "IOS",
          },
          {
            icon: "/static/workbox/gjx_ipagj.png",
            title: "IPA 生成工具",
            btnTitle: "上传",
            des: "添加iPA自助生成，无需任何费用",
            type: "IPA",
          },
        ],
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      goUrl(index, type) {
        if (type == "UDID") {
          this.$router.push("/workUDID");
        } else if (type == "Plist") {
          this.$router.push("/workPlist");
        } else if (type == "APP") {
          this.$router.push("/workAppIcon");
        } else if (type == "IPA") {
          this.$router.push("/workSelfhelp");
        } else if (type == "IOS") {
          this.$router.push("/workonlineTest");
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f7f7f7");
    },
  };

</script>
<style scoped>
  .work-main {
    background-color: #000;
    padding: 70px 10vw;
    padding-top: 30px;
    background-image: url("../../../static/workbox/gjx_bk.36fcf8d.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .main {
    position: relative;
    top: -50px;
  }

  @media (max-width: 2000px) {
    .work-main {
      background-size: 120vw;
      background-position-x: -10vw;
    }

    .main {
      position: relative;
      top: -30px;
    }
  }

  @media (max-width: 1600px) {
    .work-main {
      background-size: 140vw;
      background-position-x: -20vw;
    }
  }

  .head {
    width: 100%;
    height: 18vw;
    min-height: 390px;
    /* padding: 0px 5vw; */
    /* padding-top: 0px; */
    vertical-align: top;
    display: flex;
    justify-content: center;
  }

  /* .head-block .button {
    margin-top: 50px;
    background-color: #ff7926;
    border-radius: 30px;
    border: 1px solid #ff7926;
    font-size: 16px;
    width: 160px;
    height: 50px;
    letter-spacing: 2px;
  } */

  .head-block .button i {
    font-size: 18px;
  }

  .top_imga {
    width: 180px;
    margin-right: 30px;
    float: left;
  }

  .top_imgb {
    margin-top: 50px;
    width: 800px;
    display: block;
  }

  .top_imgc {
    margin-top: 30px;
    width: 130px;
    /* border: 6px solid #ff7926; */
    border: 10px solid transparent;
    border-radius: 0px 15px 0px 15px;
    background-clip: padding-box, border-box;
    /* linear-gradient(-135deg, #FF7226, #FF9D68) */
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #FF7226, #FF9D68);
  }

  .common-container {
    width: 100%;
    height: 95px;
    border: 1px dashed #f9763b;
    border-radius: 8px;
    margin-top: 20px;
    position: relative;
    padding: 15px;
    padding-left: 20px;
  }

  .common-container img {
    float: left;
    width: 65px;
  }

  .common-left {
    float: left;
    color: #fff;
    padding-left: 20px;
  }

  .common-left p.left-one {
    font-size: 18px;
    margin: 0px;
    line-height: 35px;
    font-weight: 600;
  }

  .common-left p.left-two {
    font-size: 14px;
    margin: 0px;
    line-height: 30px;
  }

  .common-right {
    float: right;
    margin: 12px 30px 12px 0px;
    border: 0px;
    border-radius: 30px;
    width: 100px;
    height: 40px;
    background-image: linear-gradient(to right, #ef8b4b, #f57823);
    color: #fff;
  }

</style>
